/**
 * 单选框框组件
 * @author SPY
 * @date 2020/04/10
 */
import React from 'react';
import { Radio, Row, Col } from 'antd';

const { Group } = Radio;

export interface SimpleRadioProps {
  idKey?: string; // 单选框对应的id名称
  nameKey?: string; // 单选框对应的name名称
  columns?: number; // 单选框每行显示的列数，默认3列
  disabledOptions: string[]; // 要禁用的id集合
  dataSource: Array<ItemProps>; // 单选框要展示的数组列表
  [x: string]: any; // 兼容antd组件默认参数传入
}

export interface ItemProps {
  [key: string]: any; // 定义对象的下标为string类型
}

const SimpleRadio: React.FC<SimpleRadioProps> = props => {
  const {
    idKey = 'value',
    nameKey = 'label',
    columns = 3,
    disabledOptions,
    dataSource,
    ...restProps
  } = props;

  return (
    <Group {...restProps}>
      <Row gutter={{ xs: 4, sm: 8, md: 16, xl: 24 }}>
        {dataSource.map((item: ItemProps) => {
          return (
            <Col key={item[idKey]} span={Math.floor(24 / columns)}>
              <Radio
                key={item[idKey]}
                value={item[idKey]}
                disabled={disabledOptions.includes(item[idKey])}
              >
                {item[nameKey]}
              </Radio>
            </Col>
          );
        })}
      </Row>
    </Group>
  );
};

export default SimpleRadio;
